<template>
  <div class="mine-main">
    <div class="mine-header">
      <div v-if="!isLogin" class="avatar">
        <el-avatar :src="avatarPlaceHolder" :size="50"></el-avatar>
        <!--              登录/注册-->
        <div @click="goRouter('/login')" class="method">{{ $t('h.A023') }}</div>
      </div>
      <div v-else class="avatar_active">
        <van-uploader :before-read="beforeRead">
          <el-avatar :src="avatar" :size="50"></el-avatar>
        </van-uploader>
        <div class="method">{{ form.email }}</div>
      </div>
      <div class="shop-base-info">
        <div class="shop-center">
          <div @click="checkAndGo('/collect')" class="item">
            <p>{{ favoriteProductsNum }}</p>
            <!--                      收藏商品-->
            <div class="name">{{ $t('h.A024') }}</div>
          </div>
          <div class="line"/>
          <div @click="checkAndGo('/collectShop')" class="item">
            <p>{{ form.followers || 0 }}</p>
            <!--                      、关注店铺-->
            <div class="name">{{ $t('h.A025') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isLogin" class="card-item-with">
      <div class="card-item">
        <div class="box-top">
          <!--                  账户余额-->
          <p>{{ $t('h.A026') }}(USD)
            <img @click="isCLose=false" v-if="isCLose" src="../../assets/image/open.png" alt="">
            <img @click="isCLose=true" v-else src="../../assets/image/close.png" alt="">
          </p>
          <p v-if="isCLose">{{ form.money }}</p>
          <p v-else>*****</p>
        </div>
        <div class="box-submit">
          <a href="javascript:void (0)" @click="goRouter('/withdraw',1)" class="left-submiyt">
            <!--                      提现-->
            {{ $t('h.A027') }}</a>
          <a href="javascript:void (0)" @click="goRouter('/recharge',1)" class="right-submiyt">
            <!--                      充值-->
            {{ $t('h.A028') }}</a>
        </div>
      </div>
    </div>
    <!--        <div class="card-box">-->
    <!--            <div class="box-nav">-->
    <!--                <div class="order-top">-->
    <!--&lt;!&ndash;                  我的订单&ndash;&gt;-->
    <!--                    <span>{{ $t('h.A029') }}</span>-->
    <!--&lt;!&ndash;                  全部&ndash;&gt;-->
    <!--                    <span @click="goRouter('/order',1)">{{ $t('h.A030') }} <van-icon name="arrow" /></span>-->
    <!--                </div>-->
    <!--                <div class="order-nav">-->
    <!--                    <van-grid :border="false" column-num="5">-->
    <!--&lt;!&ndash;                      待付款&ndash;&gt;-->
    <!--                        <van-grid-item @click="goRouter('/order',1)" icon="photo-o" :text="$t('h.A031')">-->
    <!--                            <template #icon>-->
    <!--                                <img class="image" src="../../assets/image/a.png" alt="">-->
    <!--                            </template>-->
    <!--                        </van-grid-item>-->
    <!--&lt;!&ndash;                      待发货&ndash;&gt;-->
    <!--                        <van-grid-item @click="goRouter('/order',1)" icon="photo-o" :text="$t('h.A032')" >-->
    <!--                            <template #icon>-->
    <!--                                <img class="image" src="../../assets/image/b.png" alt="">-->
    <!--                            </template>-->
    <!--                        </van-grid-item>-->
    <!--&lt;!&ndash;                      待收货&ndash;&gt;-->
    <!--                        <van-grid-item @click="goRouter('/order',1)" icon="photo-o" :text="$t('h.A033')" >-->
    <!--                            <template #icon>-->
    <!--                                <img class="image" src="../../assets/image/c.png" alt="">-->
    <!--                            </template>-->
    <!--                        </van-grid-item>-->
    <!--&lt;!&ndash;                      待评价&ndash;&gt;-->
    <!--                        <van-grid-item @click="goRouter('/order',1)" icon="photo-o" :text="$t('h.A034')">-->
    <!--                            <template #icon>-->
    <!--                                <img class="image" src="../../assets/image/d.png" alt="">-->
    <!--                            </template>-->
    <!--                        </van-grid-item>-->
    <!--&lt;!&ndash;                      退货/售后&ndash;&gt;-->
    <!--                        <van-grid-item @click="goRouter('/order',1)" icon="photo-o" :text="$t('h.A035')">-->
    <!--                            <template #icon>-->
    <!--                                <img class="image" src="../../assets/image/e.png" alt="">-->
    <!--                            </template>-->
    <!--                        </van-grid-item>-->
    <!--                    </van-grid>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <div class="card-box-nav">
      <div @click="startRuzhu" class="card-nav-list">
                <span class="nav-left">
<!--                  商家入驻-->
                    <img src="../../assets/image/a1.png" alt="">{{ $t('h.A038') }}
                </span>
        <span class="icon"><van-icon name="arrow"/></span>
      </div>
    </div>
    <div v-if="false" @click="goRouter('/loan')" class="card-box-nav ">
      <div class="bgk-postions">
        <div class="card-nav-list bgk-box ">
                      <span class="nav-left">
<!--                        贷款申请-->
                        <img src="../../assets/image/a2.png" alt="">{{ $t('h.A039') }}
                      </span>
          <span class="icon"><van-icon name="arrow"/></span>
        </div>
      </div>
    </div>
    <div class="card-menu">
      <div class="list-menu">
        <div v-ripple="() => { goRouter('/lang') }" class="van-cell-box van-ripple">
                    <span>
                         <img src="../../assets/image/a3.png" alt="">
                      <!--                      语言-->
                        {{ $t('h.A040') }}
                    </span>
          <span>
                        {{ lang.name }}
                        <van-icon name="arrow"/>
                    </span>

        </div>
        <div v-ripple="() => { goRouter('/setting',1) }" class="van-cell-box">
                    <span>
                         <img src="../../assets/image/a4.png" alt="">
                      <!--                      设置-->
                        {{ $t('h.A041') }}
                    </span>
          <span>
                        <van-icon name="arrow"/>
                    </span>

        </div>
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import pageFooter from '../../components/flooter/index';
import {accountAvatarUpload, getMerchantInfo, userProfile} from '@/api/apiFox';
import {getItem} from '@/plugins';
import {decrypt} from '@/utils/AES';
import {Toast} from 'vant';
import {mapActions, mapGetters} from 'vuex';

export default {
  name: 'index',
  data() {
    return {
      avatarPlaceHolder: require('@/assets/image/avatar.png'),
      isCLose: false,
      lang: '',
      avatar: '',
      form: {
        nickname: '',
      }
    };
  },
  components: {pageFooter},
  methods: {
    ...mapActions(['updateUser']),
    checkAndGo(path) {
      this.isLogin ? this.$router.push(path) : this.$router.push('/login');
    },
    startRuzhu() {
      Toast.loading({
        forbidClick: true
      });
      getMerchantInfo().then(res => {
        Toast.clear();
        const code = res.code;
        const msg = res.msg;
        if (code === 0) {
          //冻结 || 未审核
          this.$router.push({
            path: '/success',
            query: {
              status: res.data,
              msg
            }
          });
        } else if (code === 1) {
          //驳回-2 未注册 2 正常 1
          if (res.data?.shop_info?.status === -2) {
            this.$router.push({
              path: '/merchant',
              query: {
                auto: true
              }
            });
          } else if (res.data?.shop_info?.status === 2) {
            this.$router.push({
              path: '/know'
            });
          } else if (res.data?.shop_info?.status === 1) {
            window.location = res.data?.merchant_url;
          }

        }
      }).catch(err => {
        this.$router.push({
          path: '/login'
        });
      });
    },
    goRouter(item, status) {
      if (status === 1) {
        this.isLogin ? this.$router.push(item) : this.$router.push('/login');
      } else {
        this.$router.push(item);
      }

    },
    beforeRead(file) {
      accountAvatarUpload({file: file}).then(res => {
        this.avatar = res.fullurl ? res.fullurl : require('@/assets/image/avatar.png');
        this.uploadAvatar({avatar: res.url});
      }).catch(err => {
      });
      // this.uploadAvatar({avatar:''})
    },

    uploadAvatar() {
      userProfile().then(res => {
        // 头像更换成功
        Toast(this.$t('h.A056'));
      }).catch(err => {
      });
    }
  },
  computed: {
    ...mapGetters(['favoriteProducts', 'userInfo', 'isLogin']),
    favoriteProductsNum() {
      return this.favoriteProducts.length;
    }
  },
  mounted() {
    if (this.$store.state.lang) {
      this.lang = this.$store.state.lang;
    }
    this.updateUser().then(res => {
      if (this.isLogin) {
        this.avatar = res.avatar;
        this.form = res;
      }
    });
  }
};
</script>

<style scoped lang="scss">
.mine-main {
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;

  .mine-header {
    width: 100%;
    height: 230px;
    background: url("../../assets/image/bg.ca2cbb8b.png") no-repeat 50% 50%;
    //background-color: var(--main-color);
    color: #fff;
    background-size: cover;
    background-position: top;
    padding: 60px 0 0 0;
    box-sizing: border-box;

    .avatar {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 0 0 3%;
      box-sizing: border-box;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .method {
        color: #fff;
        font-size: 22px;
        font-weight: 600;
        margin-left: 10px;
      }
    }

    .avatar_active {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 0 0 3%;
      box-sizing: border-box;
      font-size: 18px;

      .method {
        height: 60px;
        width: 200px;
        display: flex;
        align-items: center;
        margin-left: 10px;
      }

      .left {
        width: 50px;

        img {
          border-radius: 50%;
          height: 50px;
        }

        p {
          width: 100%;
          text-align: center;
          font-size: 16px;
          //margin-top: -20px;
          color: #fff;

          span {
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 15px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.2);
            text-align: center;

            i {
              font-style: normal;
              font-size: 10px;
              margin-right: 3px;
            }
          }
        }
      }


    }

    .shop-base-info {
      margin-top: 20px;
      width: 100%;
      height: 60px;
      /*background: red;*/
      display: flex;
      justify-content: center;

      .shop-center {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;

        .item {
          width: 50%;
          height: 60px;
          font-size: 14px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;

          .name {
            width: 100%;
            text-align: center;
            padding: 0 15px;
          }

          p {
            font-size: 16px;
          }
        }

        .line {
          width: 1px;
          height: 20px;
          background: #fff;
        }
      }
    }

  }

  .card-item-with {
    width: 100%;
    padding: 0 4%;
    margin-top: -30px;
    box-sizing: border-box;

    .card-item {
      width: 100%;
      height: 130px;
      background-color: #fff;
      box-shadow: 0 0.3125rem 0.3125rem hsla(0, 0%, 58%, .07);
      padding: 3%;
      box-sizing: border-box;

      .box-top {
        width: 100%;
        text-align: center;
        margin-top: 5px;

        p:nth-child(1) {
          justify-content: center;
          font-size: 12px;
          color: #999;
          display: flex;
          align-items: center;

          img {
            margin-left: 5px;
            height: 10px;
          }
        }

        p:nth-child(2) {
          text-align: center;
          margin-top: 5px;
          font-size: 24px;
          color: #000;
        }
      }

      .box-submit {
        width: 100%;
        height: 40px;
        display: flex;
        margin-top: 10px;
        justify-content: space-around;
        align-items: center;

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          border-radius: 5px;
        }

        .left-submiyt {
          width: 120px;
          height: 32px;
          box-sizing: border-box;
          border: 1px solid #333;
          color: #333;
        }

        .right-submiyt {
          width: 120px;
          height: 32px;
          background: #002FFF;
          color: #fff;
        }
      }
    }
  }

  .card-box {
    width: 100%;

    padding: 4%;
    box-sizing: border-box;

    .box-nav {
      width: 100%;
      height: 100px;
      background-color: #fff;
      box-shadow: 0 0.3125rem 0.3125rem hsla(0, 0%, 58%, .07);
      box-sizing: border-box;

      .order-top {
        padding: 3%;
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        span:nth-child(1) {
          font-size: 14px;
          color: #333;
        }

        span {
          font-size: 12px;
          color: #999;
        }
      }

      .order-nav {
        width: 100%;

        .image {
          height: 20px;
        }
      }
    }
  }

  .card-box-nav {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    height: 60px;
    margin-bottom: 10px;
    margin-top: 20px;

    .bgk-postions {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, 0.8);
      /*padding: 0 2%;*/
      padding: 0 0 0 2%;

      .bgk-box {
        background: url("../../assets/image/loan-bg.63c1e911.png") !important;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .nav-left {
          font-size: 15px;

          img {
            margin-right: 10px;
            height: 24px;
          }
        }
      }
    }

    .card-nav-list {
      width: 100%;
      height: 45px;
      background: #002FFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2%;

      box-sizing: border-box;

      .nav-left {
        font-size: 16px;

        color: #fff;
        display: flex;
        align-items: center;

        img {
          height: 40px;
        }
      }

      .icon {
        color: #fff;
        font-size: 12px;
      }

    }
  }

  .card-menu {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;

    .list-menu {
      width: 100%;
      background: #fff;

      .van-cell-box {
        width: 100%;
        height: 45px;
        padding: 0 3%;
        box-sizing: border-box;
        border-bottom: 1px solid #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;

        span {
          display: flex;
          align-items: center;
          height: 45px;

          img {
            margin-right: 8px;
            height: 18px;
          }
        }
      }
    }
  }
}

</style>
